<template>
  <div>
    <div class="box">
      <img :src="detailInfo.CoverPhoto" alt="" />
      <span @click="pushImg" class="pic_count">
        {{ detailInfo.pic_group_count }}张照片
      </span>
    </div>

    <div>
      <van-button @click="pushDealer()" type="info"> 询问低价 </van-button>
    </div>

    <div>
      <div class="tab">
        <!-- 全部 -->
        <span :class="count === -1 ? 'active' : ''" @click="all">全部</span>
        <span
          v-for="(value, key, index) in yearList"
          :key="index"
          @click="changeCount(index, key)"
          :class="{ active: count === index }"
        >
          {{ key }}
        </span>
      </div>

      <div>
        <!-- exhaust_str  3.0 -->
        <!-- max_power_str  kw -->
        <!-- inhale_type -->

        <!-- market_attribute.year -->
        <!-- car_name -->
        <ul class="oul">
          <li v-for="(value, keys, index) in yearList[key]" :key="index">
            <h4 class="h4">
              {{ value[0].exhaust_str }} / {{ value[0].max_power_str }} /
              {{ value[0].inhale_type }}
            </h4>
            <div v-for="item in value" :key="item.car_id">
              <p class="title p20">
                {{ item.market_attribute.year }}款 {{ item.car_name }}
              </p>
              <p class="subTitle">
                {{ item.horse_power }} 马力 {{ item.gear_num }} 档
              </p>
                <div class="btn" @click="pushDealer(item.car_id)">询问低价</div>
            </div>
          </li>
        </ul>

        <!-- 全部 -->
        <ul class="oul" v-show="count === -1">
          <li v-for="(value, keys, index) in yearList" :key="index">
            <div v-for="(value2, key2, indexs) in value" :key="indexs">
              <h4 class="h4">
                {{ value2[0].exhaust_str }} / {{ value2[0].max_power_str }} /
                {{ value2[0].inhale_type }}
              </h4>
              <div v-for="item in value2" :key="item.car_id">
                <p class="title p20">
                     {{ item.market_attribute.year }}款 {{ item.car_name }}
                </p>
                <p class="subTitle">
                {{ item.horse_power }} 马力 {{ item.gear_num }} 档
              </p>
                  <div class="btn" @click="pushDealer(item.car_id)">询问低价</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { getInfoAndList } from "@/api/carList";
export default {
  data() {
    return {
      detailInfo: {},
      // tabList: [],
      count: -1,
      // obj: {},
      key: "",
      carId: "",
    };
  },
  computed: {
    ...mapState("CarList", ["yearList"]),
  },
  async created() {
    let res = await getInfoAndList({
      SerialID: this.$route.params.id,
    });
    this.detailInfo = res.data.data;
    // 存储车款年份
    let yearList = {};
    this.detailInfo.list.forEach((item) => {
      if (yearList[item.market_attribute.year]) {
        // 当前对象下有 item.max_power
        if (yearList[item.market_attribute.year][item.max_power]) {
          yearList[item.market_attribute.year][item.max_power].push(item);
        } else {
          yearList[item.market_attribute.year][item.max_power] = [item];
        }
      } else {
        // 如果当前没有该年份，先设置为对象，key为 item.max_power
        yearList[item.market_attribute.year] = {
          [item.max_power]: [item],
        };
      }
    });
    this.setYearList(yearList);

    // 获取所有车系最新的id
    let arr = Object.keys(this.yearList);
    let index = null;
    index = arr.length - 1;
    let kwArr = Object.keys(this.yearList[arr[index]]);
    this.carId = this.yearList[arr[index]][kwArr[0]][0].car_id;
  },
  methods: {
    ...mapMutations("CarList", ["setYearList"]),
    // 跳转到Img
    pushImg() {
      this.$router.push("/img/" + this.$route.params.id);
    },
    // 改变count
    changeCount(index, key) {
      this.count = index;
      this.key = key;
    },
    // 点击全部
    all() {
      this.count = -1;
      this.key = "";
    },
    // 跳转资讯
    pushDealer(id) {
      console.log(id);
      this.$router.push(`/Dealer/${id ? id : this.carId}`);
      // this.$router.push("/Dealer/" + id? id: this.carId);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 250px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
  }
  .pic_count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    color: #fff;
    padding: 1px 2px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 12px;
  }
}

.tab {
  display: flex;
  text-align: center;
  line-height: 46px;
  font-size: 16px;
  span {
    flex: 1;
  }
}

.h4 {
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  font-weight: 500;
  font-size: 12 px;
  color: #999;
  background: #f4f4f4;
}

.title {
}

.subTitle {
  font-size: 12px;
  padding: 5px 10px;
  padding-left: 20px;
  color: #bdbdbd;
}

.btn {
  width: 100%;
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: skyblue;
  margin: 15px 0;
}

.p20 {
  padding: 10px 20px;
}

.active {
  color: skyblue;
}
</style>